<!--
 * @Descripttion: 维修记录
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-12 21:53:05
-->
<template>
  <el-card class="el-card-bottom-top">
    <template #header>
      <span>{{ $t("page.equipRepairArr.repairRecord") }}</span>
    </template>
    <DileTable ref="dileTableRef">
      <template #preColumn>
        <vxe-column
          field="code"
          :title="$t('page.equipRepairArr.repairRecordArr.code')"
        />
        <vxe-column
          field="startDate"
          :title="$t('page.equipRepairArr.repairRecordArr.recordStartTime')"
          formatter="formatDateTime"
        />
        <vxe-column
          field="endDate"
          :title="$t('page.equipRepairArr.repairRecordArr.recordEndTime')"
          formatter="formatDateTime"
        />
        <vxe-column
          :title="$t('page.equipRepairArr.repairRecordArr.recordGroup')"
        >
          <template #default="{ row }">
            <span>{{ row.extJson?.teamName }}</span>
          </template>
        </vxe-column>
        <vxe-column
          :title="$t('page.equipRepairArr.repairRecordArr.recordManager')"
        >
          <template #default="{ row }">
            <span>{{ row.extJson?.managerName }}</span>
          </template>
        </vxe-column>
        <vxe-column
          :title="$t('page.equipRepairArr.repairRecordArr.repairLevel')"
        >
          <template #default="{ row }">
            <span>{{
              $t(
                `page.equipRepairArr.repairRecordArr.repairLevelArr.${row.level}`
              )
            }}</span>
          </template>
        </vxe-column>
        <vxe-column
          field="totalDuration"
          :title="$t('page.equipRepairArr.repairRecordArr.recordDuration')"
        />
        <vxe-column :title="$t('page.equipRepairArr.faultType')">
          <template #default="{ row }">
            <span>{{ row.extJson?.faultTypeName }}</span>
          </template>
        </vxe-column>
      </template>
    </DileTable>
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, provide, onMounted } from "vue";
import type { propsParam_Inf } from "@/components/dile-table/index.type";
import type { object_Inf } from "@/utils/typings/index.type";
import { btnTypeEnum } from "@/components/dile-table/index.type";
import DileTable from "@/components/dile-table/index.vue";
import Dile_APi from "@/api";
/**
 * @Author: xzh
 * @Descripttion: 表格实例
 * @Param:
 */
let dileTableRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 设备主键
 * @Param:
 */
let equipId = ref<number>(0);

/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 * @param {*} id
 */
let init = (id: number) => {
  equipId.value = id;
  //加载表格
  initTableData();
};

/**
 * @Author: xzh
 * @Descripttion:表格加载事件
 * @Param:
 */
let initTableData = async () => {
  try {
    Object.assign(propsParam, {
      tableData: [],
      loading: true,
    });
    let { keyWord, pagination } = dileTableRef.value?.getTableParam(),
      { page, rows } = pagination;
    //获取维修记录列表
    let { record: tableData, total } = await Dile_APi.getEquipRepairRecordList({
      keyWord,
      pagination: {
        pageIndex: page,
        pageSize: rows,
      },
      equipmentId: equipId.value,
    });
    Object.assign(propsParam, {
      tableData: tableData.map((row: object_Inf) => {
        let { model, equipmentModel } = row;
        return {
          ...model,
          relEquip: equipmentModel,
        };
      }),
      tableRecords: total,
    });
  } finally {
    propsParam.loading = false;
  }
};
/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  loading: false,
  bottomUp: true,
  isPagination: true,
  tableRecords: 0,
  tableData: [],
  tableToolArr: [
    {
      // t("table.btnArr.search"),
      label: "table.btnArr.search",
      code: "keyWordFilter",
      btnType: btnTypeEnum.keyWordFilter,
      position: "right",
    },
  ],
  emitEvents: {
    refreshTable: initTableData,
  },
});
provide("propsParam", propsParam);

defineExpose({
  init,
});
</script>
<style lang="scss" scoped></style>
